﻿@section css{
    <style type="text/css">
        .header {
            background: url(../Images/header.gif) repeat-x;
        }

            .header div {
                font-family: 'Trebuchet MS',Arial,sans-serif;
                font-size: 25px;
                line-height: 60px;
                padding-left: 10px;
                font-weight: bold;
                color: #333;
            }
    </style>

}
<div id="layout1" class="mini-layout" style="width: 100%; height: 100%;">
    <div region="north" height="60px" class="header" bodystyle="overflow:hidden;" showsplit="false" showheader="false">
        <div>
            TMS Demo
        </div>
        <div style="position: absolute; right: 12px; bottom: 5px; font-size: 12px; line-height: 25px; font-weight: normal;">
            <span style="color: Red; font-family: Tahoma">（推荐Blue）</span>选择皮肤：
            <input id="selectSkin" name="selectSkin" class="mini-combobox" valuefield="id" textfield="text" style="width: 150px;"
                onvaluechanged="onSkinChange" data="skin" />
            @* <select id="selectSkin" onchange="onSkinChange(this.value)" style="width: 100px;">
                <option value="default">Default</option>
                <option value="blue">Blue</option>
                <option value="gray">Gray</option>
                <option value="olive2003">Olive2003</option>
                <option value="blue2003">Blue2003</option>
                <option value="blue2010">Blue2010</option>
                <option value="bootstrap">Bootstrap</option>

                <option value="metro">metro</option>
                <option value="metro-green">metro-green</option>
                <option value="metro-orange">metro-orange</option>

                <option value="jqueryui-uilightness">jqueryui-uilightness</option>
                <option value="jqueryui-humanity">jqueryui-humanity</option>
                <option value="jqueryui-excitebike">jqueryui-excitebike</option>
                <option value="jqueryui-cupertino">jqueryui-cupertino</option>
            </select>*@
        </div>
    </div>
    @* <div title="south" region="south" showsplit="false" showheader="false" height="30">
        <div style="line-height: 28px; text-align: center; cursor: default">版权所有：&nbsp&nbsp 技术支持：</div>
    </div>*@
    <div title="功能菜单" region="west" showheader="true" bodystyle="padding-left:1px;" showspliticon="true" width="230" minwidth="100" maxwidth="350">
        <ul id="leftTree" class="mini-tree" onnodeclick="onNodeSelect" textfield="MName" idfield="MID" parentfield="FID"
            resultastree="false" url="/Home/GetUser_MenuList">
        </ul>
    </div>
    <div title="center" region="center" style="border: 0; height: 621px;" bodystyle="overflow:hidden;">
        <div id="mainTabs" class="mini-tabs" activeindex="0" style="width: 100%; height: 100%;"
            plain="true" contextmenu="#tabsMenu">
            <div name="firstTab" title="首页">
                <div id="content_container">
                    <div id="firstpage_v1">
                        <div id="firstpage_v1_h1">
                            <div id="workFlow" style="width: 100%; height: 100%;">
                            </div>
                        </div>
                        <div id="firstpage_v1_h2">
                            <div id="finishedworkFlow" style="width: 100%; height: 100%;">
                            </div>
                        </div>
                    </div>
                    <div id="firstpage_v2" style="width: 49.3%; float: left; clear: left; height: 49.4%;">
                        <div id="produce_area" style="width: 100%; height: 100%;"></div>
                    </div>
                    <div id="firstpage_v3" style="width: 49.3%; margin-left: 0.4%; float: left; clear: right; height: 49.4%;">
                        <div id="benefit_area" style="width: 100%; height: 100%;"></div>
                    </div>
                </div>
            </div>

        </div>
        <ul id="tabsMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
            <li onclick="closeTab">关闭标签页</li>
            <li onclick="closeAllButFirst">关闭其他[首页除外]</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    var skin =
        [
            { id: "default", text: "Default" },
            { id: "blue", text: "Blue" },
            { id: "gray", text: "Gray" },
            { id: "olive2003", text: "Olive2003" },
            { id: "blue2003", text: "Blue2003" },
            { id: "blue2010", text: "Blue2010" },
            { id: "bootstrap", text: "Bootstrap" },
            { id: "metro", text: "metro" },
            { id: "metro-green", text: "metro-green" },
            { id: "metro-orange", text: "metro-orange" },
            { id: "jqueryui-uilightness", text: "jqueryui-uilightness" },
            { id: "jqueryui-humanity", text: "jqueryui-humanity" },
            { id: "jqueryui-excitebike", text: "jqueryui-excitebike" },
            { id: "jqueryui-cupertino", text: "jqueryui-cupertino" }
        ];
    mini.parse();

    var skinValue = mini.Cookie.get("miniuiSkin");
    if (skinValue) {
    } else {
        skinValue = "blue";
    }

    mini.get("selectSkin").setValue(skinValue);
    //mini.get("selectSkin").setValue(mini.Cookie.get("miniuiSkin") == null ? "blue" : mini.Cookie.get("miniuiSkin"));

    function onSkinChange() {
        mini.Cookie.set("miniuiSkin", mini.get("selectSkin").getValue());
        top.window.location.href = "/Home/Index";
    }

    var tabs = mini.get("mainTabs");
    var currentTab = null;

    var leftTree = mini.get("leftTree");
    leftTree.expandLevel(0);

    function onNodeSelect(e) {
        var node = e.node;
        var isLeaf = e.isLeaf;

        if (isLeaf) {
            addTab(node);
        }
    }

    function addTab(node) {
        var id = "tab$" + node.MID;
        var tab = tabs.getTab(id);
        if (!tab) {
            var tabsCount = tabs.getTabs().length;
            tab = {};
            tab.name = id;
            tab.title = node.MName;
            tab.showCloseButton = true;
            tab.url = node.MUrl;
            tabs.addTab(tab);
        }
        tabs.activeTab(tab);
    }

    //常用功能弹出页面
    function showTab1(key, text, url) {
        var id = "tab$" + key;
        var tab = tabs.getTab(id);
        if (!tab) {
            tab = {};
            tab.name = id;
            tab.title = text;
            tab.showCloseButton = true;

            //这里拼接了url，实际项目，应该从后台直接获得完整的url地址
            tab.url = url; //mini_JSPath + "../../docs/api/" + node.id + ".html";

            tabs.addTab(tab);
        }
        tabs.activeTab(tab);
    }

    function onBeforeOpen(e) {
        currentTab = tabs.getTabByEvent(e.htmlEvent);
        if (!currentTab) {
            e.cancel = true;
        }
    }

    function getTabs() {
        return tabs;
    }

    //关闭标签页
    function closeTab() {
        tabs.removeTab(currentTab);
    }
    //关闭其他标签页
    function closeAllBut() {
        tabs.removeAll(currentTab);
    }
    //关闭所有标签页
    function closeAll() {
        tabs.removeAll();
    }
    //关闭其他[首页除外]
    function closeAllButFirst() {
        var but = [currentTab];
        but.push(tabs.getTab("firstTab"));
        tabs.removeAll(but);
    }

</script>
